<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--多个组件-->
    <script src="vue2.2.js">
    </script>
</head>
<body>
<template id="tplTodoAdd">
    <div>
        <input type="text">
        <button>添加</button>
    </div>
</template>
<script>
    <!--降级-->
    var todoAdd = {
        template: "#tplTodoAdd"
    }
</script>

<template id="tplTodoItem">
    <li>01</li>
</template>

<script>
    var todoItem = {
        template: "#tplTodoItem",
        props: ['task', 'i'],
    }
</script>
<template id="tplTodoList">
    <ul>
        <todo-item v-for="(task , i) of tasks"></todo-item>
    </ul>
</template>

<script>
    new order({

    })
</script>
<script>
    var todoList = {
        template: "#tplTodoList",
        components: {
            todoItem
        }
    }
</script>
<template id="tpl-todo">
    <div>
        <h1>代办事项列表</h1>
        <todo-add></todo-add>
        <todo-list></todo-list>
    </div>
</template>
<script>
    Vue.component('tpl-todo', {
        template: "#tpl-todo",
        data: function () {
            return {tasks: ['1', '2', '3']};
        },
        components: {
            todoAdd,
            todoList,
        }
    })
</script>
<div id="app">
    <tpl-todo></tpl-todo>
</div>
<script>
    new Vue({
        el: "#app",
        data: {},
    })
</script>
</body>
</html>